var startDemo = function () {

  var myScreen = new ViewPort('myScreen', 320, 200);
  var mini = new ViewPort('mini', 96, 96);

  var tiles = new TileSet(myScreen, {
    image :'sprites.bmp',
    margin : 2,
    tileMargin : 2,
    tileWidth : 32,
    tileHeight : 32
  });

  var map = new TileMap(myScreen, tiles);
  map.loadMap(window.map_data);
  
  var mtiles = new TileSet(mini, {image :'sprites.bmp', margin : 2, tileMargin : 2, tileWidth : 32, tileHeight : 32 });
  var miniMap = new TileMap(mini, mtiles);

  var player = map.spawnObject('player', 7, 23);

  keyboard();

  window.myScreen = myScreen;
  window.sprites = tiles;
  window.map = map;
  window.player = player;
  window.miniMap = miniMap;

  var fps = document.getElementById('fps');
  var scroll_x = document.getElementById('scroll_x');
  var scroll_y = document.getElementById('scroll_y');
  var tile_info = document.getElementById('tile_type');

  mini.draw(function () {
    var ctx = this.context;
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect (0, 0, this.width, this.height);

    miniMap.draw();

    ctx.fillStyle = "rgb(0,0,200)";
    ctx.fillRect(32, 32, 32, 32);
  });

  myScreen.draw(function () {

    var tile_size = (tiles.tileWidth * map.zoom);
    
    map.scroll.x = (map.x * -1) / tile_size >> 0;
    map.scroll.y = (map.y * -1) / tile_size >> 0;

    var ctx = this.context;
    ctx.fillStyle = "#000";
    ctx.fillRect (0, 0, this.width, this.height);

    map.draw();
    map.updateObjects();  
    map.drawObjects();

    scroll_x.innerHTML = map.scroll.x;
    scroll_y.innerHTML = map.scroll.y;
    fps.innerHTML = this.fps;
  
  });

  window.setTimeout(function () {
    myScreen.start();
    mini.start();
  }, 500);
};


/// 

var keyboard = function () {
  var keys = {17 : 'control', 32 : 'space', 37 : 'left', 38 : 'up', 39 : 'right', 40 : 'down', 61 : 'plus', 109 : 'minus'};
  document.addEventListener('keydown', function (e) {
    if (e.keyCode in keys) {
      e.preventDefault();
      switch (keys[e.keyCode]) {
        case 'left':
          player.vel_x = -3;
          break;
        case 'right':
          player.vel_x = +3;
          break;
        case 'up':
          player.y -= 20;
          player.vel_y = -20;
          break;
        case 'down':
//          map.velocity.y = map.velocity.y - 1;
          break;
        case 'plus': 
          map.zoom++;
//    myScreen.context.getImageData(0, 0, 50, 50);
          break;
        case 'minus':
          map.zoom--;
          break;
        case 'space':
          map.spawnObject('bullet', player.map_x, player.map_y);
          break;
        case 'control':
          map.spawnObject('grenade', player.map_x, player.map_y - 1);
          break;
      }
    }
  }, false);


};

window.map_data = {
  objects : [
    {type : 'frog', x : 17, y : 20},
    {type : 'frog', x : 20, y : 29},
    {type : 'frog', x : 30, y : 24},
//    {type : 'grenade', x : 14, y : 16},
  ],
  objectTypes : {
    'player' : {
      direction : 'right',
      isJumping : false,
      health : 100,
      mapFollow : true
    },
    'frog' : {
      vel_x : 5,
      vel_y : -10,
      dir : 'right',
      jumpTimer : null,
      jump : function () {
        this.y -= 20;
        this.vel_x = this.dir === 'left' ? 5 : -5;
        this.vel_y = -10;
        this.dir = this.vel_x > 0 ? 'right' : 'left';
      },
      update : function () {
        if (null === this.jumpTimer) {
          var self = this;
          this.jumpTimer = setTimeout(function () {
            self.jump.call(self);
            self.jumpTimer = null;
          }, (Math.random() * 500) * 2);

        }
      }
    },
    'bullet' : {
      width : 10,
      height : 2,
      vel_x : 5,
      gravity : false,
      collision : false,
    },
    'grenade' : {
      vel_x : 10,
      vel_y : -10,
      collision : function (event) {
        if ('south' === event.type) {
          this.vel_y = this.vel_y  * -1;
        }
      }
    }
  },
  data : [
    [09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 12, 13, 14, 15, 16, 17, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 12, 15, 14, 13, 14, 16, 13, 15, 14, 13, 13 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 12, 13, 14, 15, 14, 13, 17, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 14, 13, 14, 13, 17, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 12, 16, 15, 14, 13, 14, 15, 16, 17, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 14, 13, 13, 14, 13, 15, 14, 13, 17, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 12, 13, 13, 14, 13, 16, 14, 13, 17, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 12, 16, 14, 15, 14, 13, 15, 17, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 12, 13, 14, 16, 13, 16, 13, 13, 16, 15, 16, 17, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [09, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00 ,09],
    [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 10, 11, 10, 11, 10, 11, 10, 11, 10, 11, 10, 11],
    [09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09],
  ]
};
